
<template>
  <div class="OkrTree">
    <vue2-org-tree :horizontal="true" :data="treeData" collapsable :render-content="renderContent" @on-expand="onExpand"
      @on-node-click="NodeClick" />



  </div>
</template>

<script>

export default {
  data() {
    return {
      treeData: {
        id: '0',
        status: "开始",
        title: '审批流程开始',
        expand: true,
        children: []
      },
      Elid: null,
    }
  },
  props: {
    Data: { // 回显的列表
      type: Object,
      default: () => {
        return {
          id: '0',
          status: "开始",
          title: '审批流程开始',
          expand: true,
          children: []
        }
      }
    },
  },
  created() {

  },
  mounted() {
    console.log(this.Data);
    this.treeData = this.Data
    this.toggleExpand(this.treeData, true);
  },
  methods: {

    getRightCLick() {
      var element = document.getElementById('el');
      // 添加事件监听器  
      element.addEventListener('contextmenu', function (event) {
        event.preventDefault(); // 阻止默认的右键菜单  
        console.log('你点击了右键！');
      });
    },
    collapse(list) {
      list.forEach((child) => {
        if (child.expand) {
          child.expand = false;
        }
        child.children && this.collapse(child.children);
      });
    },
    onExpand(e, data) { //点击加减号
      console.log(e, data, 'data')
      if ("expand" in data) {
        data.expand = !data.expand;
        // if (!data.expand && data.children) { //折叠的时候，是否chilren元素也折叠
        //   this.collapse(data.children);
        // }
      } else {
        this.$set(data, "expand", true);
      }
    },
    toggleExpand(data, val) { //初始化设置expand（是否展开属性）
      if (Array.isArray(data)) {
        data.forEach((item) => {
          this.$set(item, "expand", val);
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
    NodeClick(e, data) {
      this.Elid = data.id
      this.$emit('TreeIdClick', this.Elid)
    },
    Addclick() {
      setTimeout(() => {
        this.$emit('Addclick', this.treeData)
      }, 100)
    },
    // AddDiGui(arr, elid) {
    //   if (arr.id == elid) {
    //     arr.children.push({
    //       id: this.qwe,
    //       status: "结束",
    //       title: '审批流程结束',
    //       expand: true,
    //       children: []
    //     })
    //     this.qwe++
    //   } else {
    //     arr.children.forEach(el => {
    //       if (el.id == elid) {
    //         el.children.push({
    //           id: this.qwe,
    //           status: "结束",
    //           title: '审批流程结束',
    //           expand: true,
    //           children: []
    //         })
    //         this.qwe++
    //         return
    //       } else {
    //         this.AddDiGui(el, elid)
    //       }
    //     })
    //   }
    // },

    Deleteclick() {
      setTimeout(() => {
        console.log(this.Elid, 666666);
        this.DeleteDiGui(this.treeData, this.Elid)
      }, 100)
    },
    DeleteDiGui(arr, elid) {
      if (arr.id == elid) {
        return
      } else {
        arr.children.forEach((el, i) => {
          if (el.id == elid) {
            arr.children.splice(i, 1)
          } else {
            this.DeleteDiGui(el, elid)
          }
        })
      }
    },
    renderContent(h, data) { //回调元素
      return (
        <div class="el">
          <div class="top">
            <span>{data.status}</span>
            <div>
              <i class="el-icon-plus" id="AddIcon" onClick={this.Addclick}></i>
              <i class="el-icon-minus" id="DeleteIcon" onClick={this.Deleteclick}></i>
            </div>
          </div>
          <div class="box">
            <span>{data.title}</span>
          </div>
        </div>
      )
    },
  }

}
</script>
<style lang="less">
@import 'vue2-org-tree/dist/style.css';

.OkrTree {
  .el {
    padding: 0 5px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      width: 200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      color: white;

      i {
        cursor: pointer;

        &:nth-child(2) {
          margin-left: 5px;
        }
      }
    }

    .box {
      width: 98%;
      background-color: white;
      border-radius: 6px;

    }
  }


}
</style>
